<template>
  <div class="abnormal">
    <div class="flex-header">
        <my-header title="异常管理" />
    </div>
    <div class="content-box">
        <mu-text-field v-model="vin" @blur="" placeholder="VIN" ref="vin" class='input' @keyup.enter.native="getConfigData()"><i class="iconfont icon-saomiao" @click="scan('vin')"></i></mu-text-field>
        
        <mu-paper class="paper" :z-depth="2">
            <div class="list-content">车型：<span>{{car}}</span><em></em>颜色：<span>{{color}}</span></div>
        </mu-paper>
        <div class="abnormal-box">
            <mu-text-field v-model="abnormalType" @focus="openBotttomSheet('open1')" placeholder="类型" ref="abtypesel" class='input' readonly="readonly"></mu-text-field>

            <mu-text-field v-model="abnormalReas" @focus="openBotttomSheet('open2')" placeholder="原因" ref="" class='input' readonly="readonly"></mu-text-field>
        </div>

        <mu-bottom-sheet :open.sync="open1">
            <mu-list @item-click="closeBottomSheet">
                <mu-sub-header>请选择类型</mu-sub-header>
                <mu-list-item button v-for="(item,index) in abnormalTypeArr" :key="index" @click="choiceAbType(item,index)">
                    <mu-list-item-title>{{item.name}}</mu-list-item-title>
                </mu-list-item>
            </mu-list>
        </mu-bottom-sheet>

        <mu-bottom-sheet :open.sync="open2">
            <mu-list @item-click="closeBottomSheet">
                <mu-sub-header>请选择原因</mu-sub-header>
                <mu-list-item button @click="choiceAbReas(item,index)" :key="index" v-for="(item, index) in abnormalReasArrX">
                    <mu-list-item-title>{{item.name}}</mu-list-item-title>
                </mu-list-item>
            </mu-list>
        </mu-bottom-sheet>
        
        <mu-text-field v-model="text" placeholder="异常详细描述" multi-line :rows="3" :rows-max="3"></mu-text-field>
        
        <!--图片全屏预览-->
        <mu-dialog width="360" transition="slide-bottom" fullscreen :open.sync="openFullscreen">
            <mu-appbar color="" title="">
            <mu-button slot="right" flat  @click="closeFullscreenDialog">关闭</mu-button>
            </mu-appbar>
            <div id='ylbox'>
                <mu-carousel :cycle="false">
                    <mu-carousel-item>
                        <img :src="bigImg">
                    </mu-carousel-item>
                </mu-carousel>
            </div>
        </mu-dialog>

        <div class="photos">
            <div class="imgs" v-for="(item, index) in src" :key="index" @touchstart.stop="touchin(index)" @touchend.stop="cleartime()" @click.stop="openFullscreenDialog(index)">
                <img :src="item" >
            </div>
            <i class="iconfont icon-icon25201" @click="paizhao"></i>
        </div>
        
        <mu-dialog width="320" max-width="60%" :open.sync="openAlert">
            确认删除图片?
            <mu-button slot="actions" flat color="primary" @click="closeAlertDialog('n')">取消</mu-button>
            <mu-button slot="actions" flat color="primary" @click="closeAlertDialog('y')">删除</mu-button>
        </mu-dialog>


                
        <mu-button color="primary" class="submit" @click='submit' large>提交</mu-button>
    <scanning v-if="isScanning" :mark="scanMark" v-on:childByValue="childByValue" v-on:closeing="closeing"/>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/header"
import scanning from "@/components/scanning"
import api from "@/common/api"
export default {
  name: "abnormal",
  components: {
    myHeader, scanning
  },
  data () {
    return {
        scanMark: '',
        isScanning: false,
        openFullscreen: false,
        Loop: null,
        deleteIndex: null, // 删除第几张
        openAlert: false, // 删除图片层
        text: '', // 备注
        vin: '', // vin
        car: '', // 车型
        color: '', // 颜色
        isShowRFID: null,
        open1: false, // 底部 类型选择框
        open2: false, // 底部 原因选择框
        abnormalType: "", // 类型 页面显示
        abnormalReas: "", // 原因 页面显示
        abnormalTypeArr: [], // 异常类型
        abnormalReasArrX: [], // 原因选择
        abnormalReasArr: [], // 异常原因
        src: [], // 拍照的图片
        files: [], // 图片文件 base64
        bigImg: null,
        otherTaskTo: false
    }
  },
  methods: {
    closeing (val) {
      val ? this.isScanning = false : null;
    },
    childByValue (val) {
      if(val){
        if(val.split('&')[1] == 'vin'){
          this.vin = val.split('&')[0];
          this.getConfigData();
        }
      }
    },
    scan (txt) {
      this.scanMark = txt;
      this.isScanning = true;
    },
      touchin(index) {
        var _this = this;
        clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
        this.Loop = setTimeout(function() {
            _this.deleteImgDialog(index);
        }.bind(this), 500);
      },
      cleartime(id,course_id) {
        // 这个方法主要是用来将每次手指移出之后将计时器清零
        clearInterval(this.Loop);
      },
      openFullscreenDialog (index) {
        this.bigImg = this.src[index];
        this.openFullscreen = true;
      },
      closeFullscreenDialog () {
        this.openFullscreen = false;
      },
      getConfigData () {
        // 请求vin数据common.appApi.abnormalVinQuery
        /* 发送post请求 */
        let data = Object.assign({},this.$store.state.user, {
            content: {
                vin: this.vin,
                otherTaskTo: this.otherTaskTo
            }
        });
        this.common.reqData(api.app('abnormalVinQuery'), data, res=>{
            if(res.data.status === 100){
                this.car = res.data.content.task.model;
                this.color = res.data.content.task.color;
                this.$refs.abtypesel.$el.children[0].getElementsByTagName('input')[0].focus()
            }else{
                // 提示
                this.Toast({
                    message: res.data.msg
                });
            }
        },err =>{
        });
      },
      deleteImgDialog (index) {
        // 删除图片 打开
        this.deleteIndex = index;
        this.openAlert = true;
      },
      closeAlertDialog (state) {
        // 删除图片 关闭
        if(state === 'y'){
            this.src.splice(this.deleteIndex, 1);
            this.files.splice(this.deleteIndex, 1);
        }
        this.openAlert = false;
      },
      choiceAbType(item, index) {
        this.abnormalType = item.name;
        this.abnormalReas = "";
        this.open1 = false;
        this.abnormalReasArrX = this.abnormalReasArr[index];
      },
      choiceAbReas (item, index) {
        this.abnormalReas = item.name;
        this.open2 = false;
      },
      submit () {
        if(this.vin == ""){
            this.Toast.fail({
                duration: 1500,
                mask: false,
                message: 'VIN不能为空'
            });
            return;
        }
        if(this.abnormalType == ""){
            this.Toast.fail({
                duration: 1500,
                mask: false,
                message: '请选择类型'
            });
            return;
        }
        /* 发送post请求 */
        let data = Object.assign({},this.$store.state.user,{
            content: {
                vin: this.vin, // VIN码
                typeCode: this.abnormalType, // 类型
                reasonCode: this.abnormalReas, // 原因
                desc: this.text, // 备注
                images: this.files,
                otherTaskTo: this.otherTaskTo
            }
        });
        // 提示
        this.Toast.loading({
            mask: true,
            message: '提交中...'
        });
        let carAbnormal = api.app("carAbnormal");
        let abnormalUploader = api.app("abnormalUploader");
        this.common.reqData((this.isShowRFID ? carAbnormal : abnormalUploader), data, res=>{
            if(res.data.status == 100){
                this.Toast.success({
                    message: '提交成功'
                });
                // 提交成功后 全部制空
                this.vin = "";
                this.car = "";
                this.color = "";
                this.src = [];
                this.files = [];
                this.text = "";
                this.abnormalType = "";
                this.abnormalReas = "";
                this.isShowRFID = null;
            }else{
                this.Toast({
                    message: res.data.msg
                });
            }
        },err =>{
            console.log(err)
        });
      },
      closeBottomSheet () {
        this.open = false;
      },
      openBotttomSheet (who) {
        who == 'open1' ? this.open1 = true : this.open2 = true;
      },
      onChange(picker, values) {
        picker.setColumnValues(1, citys[values[0]]);
      },
      paizhao(){
          let _this = this;
          if(window.plus){
            var cmr = plus.camera.getCamera();
            var res = cmr.supportedImageResolutions[0];
            var fmt = cmr.supportedImageFormats[0];
            console.log("Resolution: "+res+", Format: "+fmt);
            cmr.captureImage( function( path ){
                plus.io.resolveLocalFileSystemURL( path, function ( entry ) {
                    // 转化本地绝对路径
                    var url = plus.io.convertLocalFileSystemURL(path);
                    _this.src.push("file://"+url);
                    // 获取图片对象
                    entry.file( function(file){
                        var fileReader = new plus.io.FileReader();
                        fileReader.onloadend = function(evt) {
                            console.log(evt.target.result);
                            _this.files.push(evt.target.result);
                        }
                        fileReader.readAsDataURL(file);
                    });
                });
            },
            function( error ) {
                console.log( "拍照已经取消: " + error.message );
            },
            {resolution:res,format:fmt}
            );
          }
      }
  },
  mounted () {
    let abnol = this.$store.state.abnormalType;
    for(let i=0;i < abnol.length;i++){
        this.abnormalTypeArr[i] = {
        code: abnol[i].code,
        name: abnol[i].name
        }
        this.abnormalReasArr[i] = abnol[i].exceptionReasons;
    }
    console.log(this.$route);
    if(this.$route.params.isShowRFID){
        this.isShowRFID = this.$route.params.isShowRFID;
    }
    if(this.$route.params.vin){
        this.vin = this.$route.params.vin;
        this.otherTaskTo = true;
        this.getConfigData();
    }
    
    setTimeout(() => {
        this.$refs.vin.$el.children[0].getElementsByTagName('input')[0].focus();
        window.plus ? plus.key.hideSoftKeybord() : 0;
    }, 50);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mu-input{
    width: 85%;
    margin: 20px auto 0;
    display: block;
}
.imgs{
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin: 10px;
}
.imgs img{
    width: 100%;
}
.photos{
    border: 1px solid #ccc;
    width: 90%;
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
i.iconfont.icon-icon25201{
    display: block;
    font-size: 50px;
    margin: 10px;
}
.paper{
    width: 90%;
    margin: 20px auto 0;
    padding: 10px 0;
}
.paper div{
    padding: 10px 20px;
}
.submit{
    display: block;
    width: 90%;
    margin: 20px auto;
}
.abnormal-box {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}
.abnormal-box .mu-input{
    width: 45%;
}
em{padding: 0 2em;}
.mu-carousel{
    height: 100%;
}
#ylbox{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#ylbox img{
    width: 100%;
    height: 100%;
}
header.mu-appbar{
    box-shadow: none;
    background: none;
    position: absolute;
    width: 100%;
}
</style>
